<template>
	<div class="xjlunbotubox">
		<div class="xjlunbotutitle"><span>单图广告</span></div>
		<div class="xjlunbotucontent">
			<div class="xjselectlink">
				<div class="avatar-uploader" @click="showUploadImg">
					<img v-if="dantu.src" :src="dantu.src" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</div>
				<el-button class="xjbutton" @click="setLink()">设置链接</el-button>
				<el-link type="primary" :href="dantu.url"><span style="color:black;" v-if="dantu.title">链接：</span>{{dantu.title}}</el-link>
			</div>
			<p>
				<el-tag>只能上传jpg/png文件，且不超过1000kb</el-tag>
			</p>
			<p>建议尺寸750*280像素的图片,<span style="color:red">选择图片后点击保存才能生效</span></p>
		</div>
		<uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
		<xjsetlink ref="xjsetlinkcom" v-on:childByLinkValue="childByLinkValue"></xjsetlink>
	</div>
</template>

<script>
	import uploadimage from '@/components/common/uploadimage.vue';
	import xjsetlink from '@/components/shop/xjsetlink.vue';
	export default {
		props: ["dantu"],
		components: {
			uploadimage,
			xjsetlink
		},
		data() {
			return {
				//dialogVisible: false,
			}
		},
		methods: {
			setLink() {
				this.$refs.xjsetlinkcom.dialogVisible=true;
			},
			showUploadImg() { //显示上传组件
				this.$refs.uploadimagecom.dialogVisible = true;
			},
			childByImageValue: function(childValue) {
				// childValue就是子组件传过来的值
				this.$parent.nowitem.dantuimg.src = childValue
			},
			childByLinkValue(childValue){
                this.$parent.nowitem.dantuimg.title = childValue.title;
				this.$parent.nowitem.dantuimg.url = childValue.url;
			}
		},
		created() {}
	}
</script>

<style lang="scss">
	//@import "@/assets/css/common.scss";
	.xjlunbotubox {
		width: 400px;
		display: flex;
		flex-direction: column;

		.xjlunbotutitle {
			width: 100%;
			height: 30px;
			background-color: $danlv;
			border: 1px solid $qianlv;

			span {
				margin-left: 10px;
				font-size: 12px;
				line-height: 30px;
				color: $shenlv;
			}
		}

		.xjlunbotucontent {
			width: 100%;
			// height: 100%;
			background-color: white;
			border: 1px solid $qianlv;
            padding-bottom: 20px;
			.xjselectlink {
				display: block;
				.avatar-uploader {
					border: 1px dashed #d9d9d9;
					border-radius: 6px;
					cursor: pointer;
					position: relative;
					overflow: hidden;
					width: 375px !important;
					text-align: center;
				}

				.avatar-uploader:hover {
					border-color: #409EFF;
				}

				.avatar-uploader-icon {
					font-size: 28px;
					color: #8c939d;
					width: 178px;
					height: 178px;
					line-height: 178px;
				}
				.avatar{
					width: 100%;
					display: block;
				}
			}

			.van-uploader__wrapper {
				flex-direction: column;
			}

			.xjbutton {
				background-color: $shenlv;
				color: white;
				margin: 5px 10px 12px;
				display: inline-block;
			}

			p {
				font-size: 12px;
				margin-left: 15px;
			}
		}

	}
</style>
